<template>
	<div>
		<mj-title type="h2" title="Collapse 折叠面板"></mj-title>
		<div class="page-desc">可以折叠/展开的内容区域。</div>

		<mj-title type="h5" title="基础使用"></mj-title>
		<div class="page-desc" style="margin-bottom: 10px;">默认可以同时展开多个面板，可以设置默认展开第几个。</div>
		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML" name="html">
				<mj-collapse v-model="active" class="mb50" @change="onCollapseChange">
					<mj-collapse-item title="Collapse1" name="1">
						<mj-list :data="data1" class="gray6" size="small" border="false"></mj-list>
					</mj-collapse-item>
					<mj-collapse-item title="Collapse2" name="2">
						<mj-list :data="data2" class="gray6" size="small" border="false"></mj-list>
					</mj-collapse-item>
					<mj-collapse-item title="Collapse3" name="3">
						<mj-list :data="data3" class="gray6" size="small" border="false"></mj-list>
					</mj-collapse-item>
				</mj-collapse>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
				<pre>
					<code class="language-html line-numbers">
					&lt;template>
						&lt;mj-collapse v-model="active" class="mb50" @change="onCollapseChange">
							&lt;mj-collapse-item title="Collapse1" name="1">
								&lt;mj-list :data="data1" class="gray6" size="small" border="false">&lt;/mj-list>
							&lt;/mj-collapse-item>
							&lt;mj-collapse-item title="Collapse2" name="2">
								&lt;mj-list :data="data2" class="gray6" size="small" border="false">&lt;/mj-list>
							&lt;/mj-collapse-item>
							&lt;mj-collapse-item title="Collapse3" name="3">
								&lt;mj-list :data="data3" class="gray6" size="small" border="false">&lt;/mj-list>
							&lt;/mj-collapse-item>
						&lt;/mj-collapse>
					&lt;/template>
					&lt;script>
					export default {
						data () {
							return {
								data1:[
									{title:"众芳摇落独暄妍，占尽风情向小园。"},
									{title:"疏影横斜水清浅，暗香浮动月黄昏。"},
								],
								data2:[
									{title:"庄周梦蝴蝶，蝴蝶为庄周。一体更变易，万事良悠悠。"},
									{title:"乃知蓬莱水，复作清浅流。青门种瓜人，旧日东陵侯。"},
									{title:"富贵故如此，营营何所求。"},
								],
								data3:[
									{title:"为天地立心，为生民立命，为往圣继绝学，为万世开太平"}
								],
								active:"1",
							}
						},
						methods:{
							onCollapseChange(val){
								console.log('回调collapse点击：',val)
							},
						}
					}
					&lt;/script>
					</code>
				</pre>
			</mj-tab-pane>
		</mj-tabs>

		<mj-title type="h5" title="手风琴效果"></mj-title>
		<div class="page-desc" style="margin-bottom: 10px;">每次只能展开一个面板</div>
		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML" name="html">
				<mj-collapse v-model="active" class="mb50" accordion>
					<mj-collapse-item title="Collapse1" name="1">
						<mj-list :data="data1" class="gray6" size="small" border="false"></mj-list>
					</mj-collapse-item>
					<mj-collapse-item title="Collapse2" name="2">
						<mj-list :data="data2" class="gray6" size="small" border="false"></mj-list>
					</mj-collapse-item>
					<mj-collapse-item title="Collapse3" name="3">
						<mj-list :data="data3" class="gray6" size="small" border="false"></mj-list>
					</mj-collapse-item>
				</mj-collapse>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
				<pre>
					<code class="language-html line-numbers">
					&lt;template>
						&lt;mj-collapse v-model="active" class="mb50" accordion>
							&lt;mj-collapse-item title="Collapse1" name="1">
								&lt;mj-list :data="data1" class="gray6" size="small" border="false">&lt;/mj-list>
							&lt;/mj-collapse-item>
							&lt;mj-collapse-item title="Collapse2" name="2">
								&lt;mj-list :data="data2" class="gray6" size="small" border="false">&lt;/mj-list>
							&lt;/mj-collapse-item>
							&lt;mj-collapse-item title="Collapse3" name="3">
								&lt;mj-list :data="data3" class="gray6" size="small" border="false">&lt;/mj-list>
							&lt;/mj-collapse-item>
						&lt;/mj-collapse>
					&lt;/template>
					&lt;script>
					export default {
						data () {
							return {
								data1:[
									{title:"众芳摇落独暄妍，占尽风情向小园。"},
									{title:"疏影横斜水清浅，暗香浮动月黄昏。"},
								],
								data2:[
									{title:"庄周梦蝴蝶，蝴蝶为庄周。一体更变易，万事良悠悠。"},
									{title:"乃知蓬莱水，复作清浅流。青门种瓜人，旧日东陵侯。"},
									{title:"富贵故如此，营营何所求。"},
								],
								data3:[
									{title:"为天地立心，为生民立命，为往圣继绝学，为万世开太平"}
								],
								active:"1",
							}
						},
					}
					&lt;/script>
					</code>
				</pre>
			</mj-tab-pane>
		</mj-tabs>

		<mj-title type="h5" title="简洁模式"></mj-title>
		<div class="page-desc" style="margin-bottom: 10px;">设置属性 <code>simple</code> 可以显示为不带边框和背景色的简洁模式。</div>
		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML" name="html">
				<mj-collapse class="mb50" simple>
					<mj-collapse-item title="Collapse1" name="1">
						<mj-list :data="data1" class="gray6" size="small" border="false"></mj-list>
					</mj-collapse-item>
					<mj-collapse-item title="Collapse2" name="2">
						<mj-list :data="data2" class="gray6" size="small" border="false"></mj-list>
					</mj-collapse-item>
					<mj-collapse-item title="Collapse3" name="3">
						<mj-list :data="data3" class="gray6" size="small" border="false"></mj-list>
					</mj-collapse-item>
				</mj-collapse>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
				<pre>
					<code class="language-html line-numbers">
					&lt;template>
						&lt;mj-collapse class="mb50" simple>
							&lt;mj-collapse-item title="Collapse1" name="1">
								&lt;mj-list :data="data1" class="gray6" size="small" border="false">&lt;/mj-list>
							&lt;/mj-collapse-item>
							&lt;mj-collapse-item title="Collapse2" name="2">
								&lt;mj-list :data="data2" class="gray6" size="small" border="false">&lt;/mj-list>
							&lt;/mj-collapse-item>
							&lt;mj-collapse-item title="Collapse3" name="3">
								&lt;mj-list :data="data3" class="gray6" size="small" border="false">&lt;/mj-list>
							&lt;/mj-collapse-item>
						&lt;/mj-collapse>
					&lt;/template>
					</code>
				</pre>
			</mj-tab-pane>
		</mj-tabs>

		<mj-title type="h5" title="API"></mj-title>
		<mj-title type="h6" title="Collapse 参数"></mj-title>
		<table class="api-table">
			<thead>
				<tr>
					<th>属性</th>
					<th>说明</th>
					<th>类型</th>
					<th>默认值</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>value</td>
					<td>当前激活的面板的 name，可以使用 v-model 双向绑定</td>
					<td>Array | String</td>
					<td>-</td>
				</tr>
				<tr>
					<td>accordion</td>
					<td>是否开启手风琴模式，开启后每次至多展开一个面板</td>
					<td>Boolean</td>
					<td>false</td>
				</tr>
				<tr>
					<td>simple</td>
					<td>是否开启简洁模式</td>
					<td>Boolean</td>
					<td>false</td>
				</tr>
			</tbody>
		</table>

		<mj-title type="h6" title="Collapse 事件"></mj-title>
		<table class="api-table">
			<thead>
				<tr>
					<th>事件名</th>
					<th>说明</th>
					<th>回调</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>onCollapseChange</td>
					<td>切换面板时触发，返回当前已展开的面板的name</td>
					<td></td>
				</tr>
			</tbody>
		</table>

		<mj-title type="h6" title="Collapse Item 参数"></mj-title>
		<table class="api-table">
			<thead>
				<tr>
					<th>属性</th>
					<th>说明</th>
					<th>类型</th>
					<th>默认值</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>title</td>
					<td>面板标题</td>
					<td>String</td>
					<td>-</td>
				</tr>
				<tr>
					<td>name</td>
					<td>标识符,不可重复</td>
					<td>String</td>
					<td>-</td>
				</tr>
			</tbody>
		</table>
	</div>
</template>

<script>
export default {
	data () {
		return {
			data1:[
				{title:"众芳摇落独暄妍，占尽风情向小园。"},
				{title:"疏影横斜水清浅，暗香浮动月黄昏。"},
			],
			data2:[
				{title:"庄周梦蝴蝶，蝴蝶为庄周。一体更变易，万事良悠悠。"},
				{title:"乃知蓬莱水，复作清浅流。青门种瓜人，旧日东陵侯。"},
				{title:"富贵故如此，营营何所求。"},
			],
			data3:[
				{title:"为天地立心，为生民立命，为往圣继绝学，为万世开太平"}
			],
			active:"1",
		}
	},
	methods:{
		onCollapseChange(val){
			console.log('回调collapse点击：',val)
		},
	}
}
</script>

